import 'package:flutter/material.dart';
import 'package:kasax_demos2/entry/data_posts_test.dart';

/// 我们考虑一个这样的布局：一个滑动的视图中包括一个标题视图（HeaderView），一个列表视图（ListView），一个网格视图（GridView）。
//
// 我们怎么可以让它们做到统一的滑动效果呢？使用前面的滚动是很难做到的。
//
// Flutter中有一个可以完成这样滚动效果的Widget：CustomScrollView，可以统一管理多个滚动视图。
//
// 在CustomScrollView中，每一个独立的，可滚动的Widget被称之为Sliver。
//
// 补充：Sliver可以翻译成裂片、薄片，你可以将每一个独立的滚动视图当做一个小裂片。

/// Slivers的基本使用

//因为我们需要把很多的Sliver放在一个CustomScrollView中，所以CustomScrollView有一个slivers属性，里面让我们放对应的一些Sliver：
//
//SliverList：类似于我们之前使用过的ListView；
//
//SliverFixedExtentList：类似于SliverList只是可以设置滚动的高度；
//
//SliverGrid：类似于我们之前使用过的GridView；
//
//SliverPadding：设置Sliver的内边距，因为可能要单独给Sliver设置内边距；
//
//SliverAppBar：添加一个AppBar，通常用来作为CustomScrollView的HeaderView；
//
// SliverSafeArea：设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）

/// SliverGrid+SliverPadding+SliverSafeArea的组合
class NewSliverDemo1Home extends StatefulWidget {
  const NewSliverDemo1Home({Key? key}) : super(key: key);

  @override
  _NewSliverDemo1HomeState createState() => _NewSliverDemo1HomeState();
}

class _NewSliverDemo1HomeState extends State<NewSliverDemo1Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("NewSliver"),
      ),
      body: CustomScrollView(
        slivers: [
          SliverSafeArea(
              sliver: SliverPadding(
            padding: EdgeInsets.all(8),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 8),
              delegate: SliverChildBuilderDelegate((context, index) {
                return Container(
                  alignment: Alignment(0, 0),
                  child: Image.network(
                    PostsDatas.TEST_POSTS[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                );
              }, childCount: PostsDatas.TEST_POSTS.length),
            ),
          ))
        ],
      ),
    );
  }
}
